import React,{useState,useEffect} from "react";
import "./Newnum.less";
import { Button, Card, Statistic, Row, Col } from "antd";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";
import LineEchart from "../../../components/LineEchat/LineEchat";
import { Link } from "react-router-dom";
import http from "../../../utils/http";
export default function Newdata() {


  // useEffect(()=>{
  
  //   http({
  //     url: "api/index/selectPeople",
  //     method: "get",
  //   }).then((res) => {
  //     console.log(res);
      
  //   });
  // },[])


  return (
    <div id="hp_newData">
      <div className="headBtn">
        <Link to={"/home/homepage"}>
          <Button
            type="primary"
            size="large"
            style={{ backgroundColor: "cornflowerblue" }}
          >
            返回
          </Button>
        </Link>
        <Button type="primary" size="large" disabled={true}>
          今日人数
        </Button>
        <Link to={"/home/homepage/earnings"}>
          <Button
            type="primary"
            size="large"
            style={{ backgroundColor: "cornflowerblue" }}
          >
            今日收益
          </Button>
        </Link>
      </div>
      <Card className="cardCon">
        <Row gutter={[16, 30]}>
          <Col span={24}>
            <Card className="cardCon">
              <p>人数概况</p>
              <div className="showData">
                <div className="aData">
                  <p>访问人数</p>
                  <span className="num">2080</span>
                  <span>人</span>
                  <Statistic
                    title="日"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="周"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>

                <div className="aData">
                  <p>新增访问人数</p>
                  <span className="num">2080</span>
                  <span>人</span>
                  <Statistic
                    title="日"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="周"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>

                <div className="aData">
                  <p>下单人数</p>
                  <span className="num">2080</span>
                  <span>人</span>
                  <Statistic
                    title="日"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="周"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>

                <div className="aData">
                  <p>新增下单人数</p>
                  <span className="num">2080</span>
                  <span>人</span>
                  <Statistic
                    title="日"
                    value={11.28}
                    precision={2}
                    valueStyle={{ color: "#3f8600" }}
                    prefix={<ArrowUpOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="周"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                  <Statistic
                    title="月"
                    value={9.3}
                    precision={2}
                    valueStyle={{ color: "#cf1322" }}
                    prefix={<ArrowDownOutlined />}
                    suffix="%"
                  />
                </div>
              </div>
            </Card>
          </Col>
          <Col span={24}>
            <Card className="cardCon">
              <LineEchart />
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
